<script type="text/javascript">
/**
 * This jQuery plugin displays pagination links inside the selected elements.
 *
 * @author Gabriel Birke (birke *at* d-scribe *dot* de)
 * @version 1.1
 * @param {int} maxentries Number of entries to paginate
 * @param {Object} opts Several options (see README for documentation)
 * @return {Object} jQuery Object
 */
jQuery.fn.pagination2 = function(maxentries, opts){
	opts = jQuery.extend({
	 	first_text:"<{$lang.first}>",
	    prev_text:"<{$lang.prev}>",
        next_text:"<{$lang.next}>",
		last_text:"<{$lang.last}>",
        ellipse_text:"...",
        items_per_page:10,
		num_display_entries:10,
		num_edge_entries: 0,
		current_page:0,
		link_to:"#",
		prev_show_always:true,
		next_show_always:true,
		callback:function(){return false;}
	},opts||{});
	
	return this.each(function() {
		/**
		 * Calculate the maximum number of pages
		 */
		function numPages() {
			return Math.ceil(maxentries/opts.items_per_page);
		}
		
		/**
		 * Calculate start and end point of pagination links depending on 
		 * current_page and num_display_entries.
		 * @return {Array}
		 */
		function getInterval()  {
			var ne_half = Math.ceil(opts.num_display_entries/2);
			var np = numPages();
			var upper_limit = np-opts.num_display_entries;
			var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
			var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
			return [start,end];
		}
		
		/**
		 * This is the event handling function for the pagination links. 
		 * @param {int} page_id The new page number
		 */
		function pageSelected(page_id, evt){
			current_page = page_id;
			drawLinks();
			var continuePropagation = opts.callback(page_id, panel);
			if (!continuePropagation) {
				if (evt.stopPropagation) {
					evt.stopPropagation();
				}
				else {
					evt.cancelBubble = true;
				}
			}
			return continuePropagation;
		}
		
		/**
		 * This function inserts the pagination links into the container element
		 */
		function drawLinks() {
			panel.empty();			
			var interval = getInterval();
			var np = numPages();
			// This helper function returns a handler function that calls pageSelected with the right page_id
			var getClickHandler = function(page_id) {
				return function(evt){  pageSelected(page_id,evt);return false; }
			}
			// Helper function for generating a single link (or a span tag if it'S the current page)
			var appendItem = function(page_id, appendopts){
				page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
				appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
				if(page_id == current_page || maxentries==0){
					var lnk = $("<span class='current'>"+(appendopts.text)+"</span>");
				}
				else
				{
					var lnk = $("<a>"+(appendopts.text)+"</a>")
						.bind("click", getClickHandler(page_id))
						.attr('href', opts.link_to.replace(/__id__/,page_id));												
				}
				if(appendopts.classes){lnk.addClass(appendopts.classes);}
				panel.append(lnk);
			}

            // Radys Add
			// Generate "First"-Link
			if(opts.first_text && (current_page > 0 || opts.prev_show_always)){
				appendItem(0,{text:opts.first_text, classes:"prev"});
			}

			// Generate "Previous"-Link
			if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
				appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
			}
			// Generate starting points
			if (interval[0] > 0 && opts.num_edge_entries > 0)
			{
				var end = Math.min(opts.num_edge_entries, interval[0]);
				for(var i=0; i<end; i++) {
					appendItem(i);
				}
				if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
				{
					jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
				}
			}
			// Generate interval links
			for(var i=interval[0]; i<interval[1]; i++) {
				appendItem(i);
			}
			// Generate ending points
			if (interval[1] < np && opts.num_edge_entries > 0)
			{
				if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
				{
					jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
				}
				var begin = Math.max(np-opts.num_edge_entries, interval[1]);
				for(var i=begin; i<np; i++) {
					appendItem(i);
				}
				
			}
			// Generate "Next"-Link
			if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
				appendItem(current_page+1,{text:opts.next_text, classes:"next"});
			}

            // Radys Add
			// Generate "Last"-Link
			if(opts.last_text && (current_page < np-1 || opts.next_show_always)){
				appendItem(np-1,{text:opts.last_text, classes:"next"});
			}
			//Ricky Add
			onlyNum=function(event){
				if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
				{
					if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
					{
						event.returnValue=false; 
						return false;
					}
				}
			};
			var pageSizeStr = '<label>'+opts.perpage_text+'&nbsp;<input type="text" id="pageSize" value="'+opts.items_per_page+'"';
			pageSizeStr+=' style="width:25px;text-align:center;height:13px;line-height:13px;ime-mode:Disabled;" onchange="changePageSize2(this)" onKeydown="return onlyNum(event)"/>&nbsp;</label>';
			jQuery(pageSizeStr).appendTo(panel);
			var total='<label style="margin-left:5px;">'+opts.total_text+'<span style="font-weight:bold;">'+maxentries+'</span></label>';
			jQuery(total).appendTo(panel);
		}
		
		// Extract current_page from options
		var current_page = opts.current_page;
		// Create a sane value for maxentries and items_per_page
		maxentries = (!maxentries || maxentries < 0)?0:maxentries;
		opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
		// Store DOM element for easy access from all inner functions
		var panel = jQuery(this);
		// Attach control functions to the DOM element 
		this.selectPage = function(page_id){ pageSelected(page_id);}
		this.prevPage = function(){ 
			if (current_page > 0) {
				pageSelected(current_page - 1);
				return true;
			}
			else {
				return false;
			}
		};
		this.nextPage = function(){ 
			if(current_page < numPages()-1) {
				pageSelected(current_page+1);
				return true;
			}
			else {
				return false;
			}
		};
		// When all initialisation is done, draw the links
		drawLinks();
	});
};












  var paginationPageSize2 = 20;
  var paginationCurrentPage2 = 1;
  var paginationTotal2;
  $(document).ready(function() {  
	 //initData2(paginationCurrentPage2-1); //初始化<{$lang.data}>
  }); 
  //这个事件是在翻页时候用的 
  function pageselectCallback2(page_id, jq) { 
	paginationCurrentPage2 = page_id+1;
	initData2(page_id); 
  }

  function changePageSize2(obj){
	paginationPageSize2 = $(obj).val();
	if(paginationPageSize2 <= 0){
		paginationPageSize2 = 20;
	}
	
	if(Math.ceil(paginationTotal2/paginationPageSize2) <= paginationCurrentPage2){
		paginationCurrentPage2 = Math.ceil(paginationTotal2/paginationPageSize2);
	}
	if(paginationCurrentPage2 == 0){
		paginationCurrentPage2 = 1;
	}
	initData2(paginationCurrentPage2-1);
 }
  
  function initData2(pageIndex2) {
	loading();
	 
	if(typeof(paginationTotal2)!='undefined'){
	
	 
	
		if(Math.ceil(paginationTotal2/paginationPageSize2) <= paginationCurrentPage2){
			paginationCurrentPage2 = Math.ceil(paginationTotal2/paginationPageSize2);
			pageIndex2 = paginationCurrentPage2 - 1;
		}
	}
	loadData2(pageIndex2 + 1,paginationPageSize2);
	closeLoading();
	if(pageIndex2 <0){pageIndex2 = 0;}
	  //加入分页的<{$lang.bind}> 
	$(".pagination2").pagination2(paginationTotal2, { 
		  callback: pageselectCallback2,
		  first_text:'First',
		  prev_text: '< Previous', 
		  next_text: 'Next >', 
		  last_text: 'Last',
		  perpage_text: 'PerPage',
		  total_text: 'Total',
		  items_per_page: paginationPageSize2, 
		  num_display_entries: 6, 
		  current_page: pageIndex2, 
		  num_edge_entries: 2 
	 }); 
  } 


function loadData2(page,pageSize){
    var customer_id_bind = $('[name=customer_id_bind]').val();

	$.ajax({ 
		type: "POST",
		async: false,
		dataType: "json",
		url: "/shipping/ship-type-customer/getcustomer",//+page+"/pageSize/"+pageSize, 
		data:{
			'page':page,
			'pageSize':pageSize,
			'customer_id_bind':customer_id_bind
		},
		success: function(json) { 
			var html = "";
			if(json.ask ==0) {
			     paginationTotal2 = 1;
				html = "<td colspan='8' class=''>&nbsp;<{$lang.no_data}></td>";
			}else {
                paginationTotal2 = json.total;
				var i=1;
                $.each(json.result,function(key,item){
                    html += "<tr>";
					//html += "<td>"+'<input type="checkbox" value=""' + item.customer_id + ' id="customerid_"' + item.customer_id + ' name="customerid[]">'+"</td>";
                    html += "<td><input type='checkbox' value='" + item.customer_id + "' id='customerid_" + item.customer_id + "' name='customerid[]' class='customerid0'></td>";
					html += "<td>"+item.customer_id+"</td>";			
					html += "<td>"+item.customer_first_name+"</td>";	
					html += "<td>"+item.customer_last_name+"</td>";
					html += "<td>"+item.customer_email+"</td>";				
					html += "</tr>";
					i++;
                })
			}

			$("#list_customer").html(html);
			
		}
	}); 
}

function selectBindType(){
   //bindtable
    var st_bind_type= $("input[name='st_bind_type']:checked").val(); 
	if(st_bind_type==1){
	    $('#showCustomerlist').show();
	$("#bind").dialog({
		autoOpen:false,
		width:800,
		height:500,
		modal:true,
		show:"slide",
        zIndex:100
	});
    $(".messageDiv").dialog({
		autoOpen:false,
		width:800,
		height:200,
		modal:true,
		show:"slide",
        zIndex:200,
        title:"<{$lang.tip}><{$lang.msg}>",
        buttons:{
            "<{$lang.confirm}>": function() {$(this).dialog('close');},
            "<{$lang.return}>": function() {$(this).dialog('close');}
        }
	});

    $("#confrimDiv").dialog({
		autoOpen:false,
		width:800,
		height:200,
		modal:true,
		show:"slide",
        zIndex:200,
        title:"<{$lang.tip}><{$lang.msg}>"
	});
	}else{
	    $('#showCustomerlist').hide();
		 $("#bind").dialog({
		autoOpen:false,
		width:800,
		height:200,
		modal:true,
		show:"slide",
        zIndex:100
	});
    $(".messageDiv").dialog({
		autoOpen:false,
		width:800,
		height:200,
		modal:true,
		show:"slide",
        zIndex:200,
        title:"<{$lang.tip}><{$lang.msg}>",
        buttons:{
            "<{$lang.confirm}>": function() {$(this).dialog('close');},
            "<{$lang.return}>": function() {$(this).dialog('close');}
        }
	});

    $("#confrimDiv").dialog({
		autoOpen:false,
		width:800,
		height:200,
		modal:true,
		show:"slide",
        zIndex:200,
        title:"<{$lang.tip}><{$lang.msg}>"
	});
	}

}

function searchCustomer() {
   //loadData2(0);
   if(typeof(paginationTotal2)!='undefined'){
	   if(Math.ceil(paginationTotal2/paginationPageSize2) <= paginationCurrentPage2){
			paginationCurrentPage2 = Math.ceil(paginationTotal2/paginationPageSize2);
		}
		if(paginationCurrentPage2 == 0){
			paginationCurrentPage2 = 1;
		}
	}
	initData2(paginationCurrentPage2-1);  
}

$(function(){
   selectBindType();
});

$(function(){
 $("[name=ckAll]").click(function() {
        if ($(this).is(':checked')) {
            $(".customerid0").attr('checked', true);
        } else {
            $(".customerid0").attr('checked', false);
        }
    }); 
});
</script>
<style>
.pagination2 {
    background: url("/images/top_blue_bj.jpg") repeat-x scroll center -30px transparent;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    margin: 5px auto;
    text-align: center;
}
.pagination2 a {
    border: 1px solid #AAAAEE;
    color: #1155BB;
    text-decoration: none;
}
.pagination2 a, .pagination2 span {
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 0.3em 0.5em;
}
.pagination2 .current {
    background: none repeat scroll 0 0 #2266BB;
    border: 1px solid #AAAAEE;
    color: #FFFFFF;
}
.pagination2 .current.prev, .pagination2 .current.next {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #999999;
    color: #999999;
}


</style>
<form id="bindForm"  method="POST" >
<div>
<div>
  <div>
    <h3><{$lang.bind}></h3>
    <label> <{$lang.shipping_method}>:
    <select name="st_code_bind" id="st_code_bind" >
      <option value=""><{$lang.pls}></option>
      <{foreach key=key item=item from=$shipType}>
      <option value="<{$item.st_code}>"><{$item.st_code}></option>
      <{/foreach}>
    </select>
    </label>
    &nbsp;
    <label>
    <input type="radio" value="0" id="st_bind_type" name="st_bind_type"  onclick="selectBindType()">
    <span><{$lang.all}><{$lang.customer}></span> </label>
    <label>
    <input type="radio" value="1" id="st_bind_type" name="st_bind_type" checked onclick="selectBindType()">
    <span><{$lang.part}><{$lang.customer}></span> </label>
    &nbsp;
	
  </div>
</div>
<div id="tipmsg"></div>
</div>
<div class="listDiv ui-widget-content"></div>

<div id="showCustomerlist">
    <h3><{$lang.search}></h3>
    <label> <{$lang.customer_code}>:
    <input  class="myInput" type="text" name="customer_id_bind" id="customer_id_bind">
    </label>
    <input class="myButton" type="button" value="<{$lang.search}>" onclick="searchCustomer();">
    <input  type="hidden" value="<{$count}>" name="count">
<h3><{$lang.customer}><{$lang.list}></h3>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="myTab" id="bindtable">
  <thead>
    <tr>
      <th  width="5%"><input type="checkbox" name="ckAll" id="ckAll"/></th>
      <th  width="20%"><{$lang.customer}><{$lang.code}></th>
      <th  width="20%"><{$lang.first_name}></th>
      <th  width="20%"><{$lang.last_name}></th>
      <th  width="20%"><{$lang.email}></th>
    </tr>
  </thead>
  <tbody id="list_customer">
  </tbody>
</table>
<div class="pagination2"></div>
</div>

<div style="display:none;" class="messageDiv">
  <div id="message"></div>
</div>
<div style="display:none;" id="confrimDiv">
  <div id="confrimMsg"></div>
</div>
</form>
